<template>
  <div>
    <!-- 状态栏 -->
    <div style="background-color: #132144">
      <div class="flex justify-between">
        <div
          class="back"
          style="cursor: pointer"
          @click="
            () => {
              $router.go(-1)
            }
          "
        >
          <i class="el-icon-arrow-left" /> {{ operatorName }}
        </div>
        <div v-if="status === 2 && isAuth('10400204.MANAGE')">
          <el-button class="level-btn" @click="checkOperatorHandle">
            {{ $t('operator.checkBtn') }}
          </el-button>
        </div>
      </div>
      <el-tabs v-model="activeTab" class="dark-tab">
        <el-tab-pane :label="$t('operator.account')" name="account" />
      </el-tabs>
    </div>
    <div style="position: relative; top: -90px">
      <div class="my-card">
        <div class="my-card-header">
          <div class="flex items-center justify-between">
            <span>
              <span class="my-card-title">{{
                $t('operator.account_info')
              }}</span>
            </span>
          </div>
        </div>
        <div class="my-card-body">
          <div v-if="operator && operator.status !== 1" class="seal">
            <div class="subseal">
              {{ getStatus(operator.status) }}
            </div>
          </div>
          <div
            v-if="operator && operator.status == 1"
            class="seal"
            style="border-color: #5cb87a"
          >
            <div class="subseal" style="border-color: #5cb87a; color: #5cb87a">
              {{ getStatus(operator.status) }}
            </div>
          </div>
          <el-descriptions v-if="operator" style="padding: 16px" :column="1">
            <el-descriptions-item
              v-if="operator.status === 1"
              :label="$t('operator.oid')"
              >{{ operator.oid }}</el-descriptions-item
            >
            <el-descriptions-item :label="$t('operator.operatorNo')">{{
              operator.operatorNo
            }}</el-descriptions-item>
            <el-descriptions-item :label="$t('operator.operatorId')">{{
              operator.operatorId
            }}</el-descriptions-item>
          </el-descriptions>
          <hr />
          <el-descriptions style="padding: 16px" :column="2">
            <el-descriptions-item :label="$t('operator.mobile')">{{
              operator.mobile
            }}</el-descriptions-item>
            <el-descriptions-item :label="$t('operator.linkman')">{{
              operator.linkman
            }}</el-descriptions-item>
            <el-descriptions-item :label="$t('operator.name')">{{
              operator.name
            }}</el-descriptions-item>
            <el-descriptions-item :label="$t('operator.shortName')">{{
              operator.shortName
            }}</el-descriptions-item>
            <el-descriptions-item :label="$t('operator.email')">{{
              operator.email
            }}</el-descriptions-item>
            <el-descriptions-item :label="$t('operator.remark')">{{
              operator.remark
            }}</el-descriptions-item>
          </el-descriptions>
          <hr />

          <el-descriptions style="padding: 16px" :column="2">
            <el-descriptions-item :label="$t('operator.country')">{{
              formatCountry(operator.countryCode)
            }}</el-descriptions-item>
            <el-descriptions-item :label="$t('operator.provName')">{{
              operator.provName
            }}</el-descriptions-item>
            <el-descriptions-item :label="$t('operator.cityName')">{{
              operator.cityName
            }}</el-descriptions-item>
            <el-descriptions-item :label="$t('developer.address')">{{
              operator.address
            }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>

      <resetpw-operator ref="resetpw" />
    </div>

    <check-operator
      v-if="checkOperatorVisible"
      ref="checkOperator"
      @refreshDataList="getOperatorInfo"
      @close="checkOperatorVisible = false"
    />
  </div>
</template>

<script>
import CheckOperator from './components/check-operator'
import { formatDate } from '@/utils/formatDate'
import { getOperatorInfo } from '@/api/operator'
import { formatCountry } from '@/utils/formatCountry'
import resetpwOperator from './components/operator/account/resetpw-operator.vue'
import { isAuth } from '@/utils'

export default {
  components: {
    resetpwOperator,
    CheckOperator
  },
  data() {
    return {
      checkOperatorVisible: false,
      levelVisible: false,
      level: '',
      operatorName: '',
      activeTab: 'account',
      operatorId: this.$route.params.operatorId,
      operator: null,
      status: 2
    }
  },
  created() {
    this.getOperatorInfo()
  },
  methods: {
    checkOperatorHandle() {
      /* if (row.operatorType === 'DEMO') {
        // 服务调用失败的情况，才会出现
        this.checkDemoOperatorVisible = true
        this.$nextTick(() => {
          this.$refs.checkDemoOperator.init(row)
        })
      } else {
        this.checkOperatorVisible = true
        this.$nextTick(() => {
          this.$refs.checkOperator.init(row)
        })
      } */

      this.checkOperatorVisible = true
      this.$nextTick(() => {
        this.$refs.checkOperator.init(this.operator)
      })
    },
    getStatus(status) {
      if (status === 0) {
        return this.$t('operator.locked')
      } else if (status === 1) {
        return this.$t('operator.approved')
      } else if (status === 2) {
        return this.$t('operator.pendingReview')
      } else if (status === 3) {
        return this.$t('operator.reject')
      }
    },
    formatCountry(value) {
      return formatCountry(value)
    },
    getOperatorInfo() {
      getOperatorInfo(this.operatorId)
        .then((res) => {
          this.operator = res
          this.operatorName = res.name
          this.operator.operatorName = res.name
          this.status = res.status
        })
        .catch(this.$confirmError)
    },
    formatDate(cellValue, fmt) {
      cellValue = new Date(cellValue).valueOf()
      return formatDate(cellValue, fmt)
    },
    expirationHandler() {
      // eslint-disable-next-line no-unused-vars
      if (this.operator) {
        if (this.operator.levelCode) {
          let levelName = ''
          if (this.operator.levelCode === 'STANDARD_LEVEL') {
            levelName = this.$t('operator.level_list[0].label')
          } else if (this.operator.levelCode === 'ENTERPRISE_LEVEL') {
            levelName = this.$t('operator.level_list[1].label')
          }
          if (
            !this.operator.expireTime ||
            this.operator.expireTime === undefined
          ) {
            this.level =
              levelName + ' | ' + this.$t('operator.leverExpireForever')
          } else {
            var date = formatDate(this.operator.expireTime, 'YYYY-MM-DD')
            this.level = levelName + ' | ' + date
          }
        }
      }
    },
    isAuth
  }
}
</script>

<style lang="scss" scoped>
.my-card {
  background: #ffffff;
  border: 1px solid #eef0f7;
  box-shadow: 0px 0px 21px 0px rgba(19, 33, 68, 0.08);
  border-radius: 12px;
  margin: 0 36px;
  .my-card-header {
    padding: 32px 24px;
    border-bottom: solid 1px #eef0f7;
    .my-card-title {
      color: #1e2022;
      font-size: 16px;
      font-weight: 600;
    }
  }

  .my-card-body {
    padding: 36px;
    padding-left: 100px;
    padding-right: 100px;
    position: relative;
    ::v-deep .el-descriptions-item__label.has-colon {
      flex: none;
    }
  }
}
.seal {
  height: 100px;
  top: -24px;
  right: 70px;
  border: solid 6px #f56c6c;
  border-radius: 16px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(-15deg);
  .subseal {
    height: 80px;
    margin: 4px;
    padding: 12px;
    border: solid 2px #f56c6c;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    font-weight: 900;
    color: #f56c6c;
  }
}

::v-deep .el-descriptions__body {
  color: #677796;
}
.back {
  color: #ffffff;
  font-size: 20px;
  margin: 20px;
}
.level-btn {
  background: #2a3757;
  color: #ffffff;
  border: none;
  margin: 20px;
}

.dark-tab {
  margin: 0 20px;
  padding-bottom: 100px;
  ::v-deep .el-tabs__nav-wrap::after {
    height: 1px;
    background-color: #677796;
    z-index: 1;
  }
  ::v-deep .el-tabs__item {
    color: #677796;
    line-height: 21px;

    &:hover {
      color: #ffffff;
    }

    &.is-active {
      color: #ffffff;
    }
  }

  ::v-deep .el-tabs__item.is-top:nth-child(2) {
    padding-left: 20px;
  }
}
</style>
